@extends('admin::layouts.master')
@section('title')
    {{$title}}
@endsection
<style>
    .close{position: absolute; top: -5px; right: -3px; background-color: #FFFFFF; border-radius: 50%; color: #FFF; padding-top: 1px; opacity:0.1;}
    .layui-input-inline{margin-top: 5px;}
    .type-list:hover .close{opacity:1; background-color: red;}
    .add_type{margin-top: 5px;}
</style>
@section('tab')
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">
                <input type="hidden" name="id" value="{{$arr_data['id']}}">
                <div class="layui-form-item"> </div>

                <div class="layui-form-item">
                    <label for="L_alias" class="layui-form-label">
                        <span class="x-red">*</span>一级分类</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" value="{{$arr_data['name']}}" lay-verify="required" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="float: left"><span class="x-red">*</span>二级分类</label>
                        <span style="float: right; width: 700px">
                            @if($arr_data['son'])
                            @foreach($arr_data['son'] as $st => $ste)
                            <span>
                                <div class="layui-input-inline">
                                    <input type="hidden" name="son[{{$st}}][id]" value="{{$ste['id']}}" class="layui-input">
                                    <input type="text" name="son[{{$st}}][name]" value="{{$ste['name']}}" autocomplete="off" lay-verify="required" class="layui-input">
                                </div>
                                <div class="layui-input-inline type-list" style="width: 350px;">
                                    <input type="text" name="son[{{$st}}][explain]" value="{{$ste['explain']}}" placeholder="请输入说明" class="layui-input">
                                    <i class="layui-icon close del_service" data-url="{{route('admin_maintain_delete',['id'=>$ste['id']])}}">ဆ</i>
                                </div>
                            </span>
                            @endforeach
                            @endif
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm add_type" da-in="{{$st}}"><i class="layui-icon"></i></button>
                            <span class="before"></span>
                        </span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label"></label>
                    <button class="layui-btn layui-btn-normal" lay-filter="add" lay-submit="">提交</button>
                </div>
            </form>
        </div>
    </div>
    <div class="">
        <div id="container" style="height: 200px; width: 500px"></div>
    </div>
@endsection

@section('tab_js')
    <script>
        layui.use(['form', 'layer', 'jquery','laydate'], function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;
            del_type();
            //监听提交
            form.on('submit(add)', function (data) {
                $.ajax({
                    url: js_url('admin-maintain-update'),
                    type: 'post',
                    data: data.field,
                    dataType: "json",
                    success: function (result) {
                        if (result.state === 0) {
                            layer.msg(result.msg, {time: 600, icon: 6}, function () {
                                xadmin.close();
                                xadmin.father_reload();
                            });
                        } else {
                            layer.msg(result.msg, {time: 600, icon: 5});
                        }
                    }
                });
                return false;

            });

        });
        //添加服务类型
        $(document).on('click', '.add_type', function () {
            var daIn = Number($(this).attr('da-in')) + 1;
            var type = '<span></br><div class="layui-input-inline">' +
                '<input type="hidden" name="son[' + daIn + '][id]" value="0" class="layui-input">' +
                '<input type="text" name="son[' + daIn + '][name]" value="" lay-verify="required" placeholder="二级分类" autocomplete="off" class="layui-input">' +
                '</div>' +
                '<div class="layui-input-inline type-list" style="width: 350px">' +
                '<input type="text" name="son[' + daIn + '][explain]" value="" placeholder="请输入说明" autocomplete="off" class="layui-input">' +
                '<i class="layui-icon close" onclick="$(this).parent().parent().remove();del_type();">ဆ</i>' +
                '</div></span>';
            $('.before').before(type);

            $(this).attr('da-in',daIn);
            del_type();
        });
        function del_type(){
            if($('.type-list').length < 10){
                $('.add_type').show();
            }else{
                $('.add_type').hide();
            }
        }

        //删除服务类型数据
        $(document).on('click', '.del_service', function () {
            var url = $(this).attr('data-url');
            var that = $(this);
            layer.confirm('确定删除已有数据吗？', {btn: ['确定', '取消']}, function () {
                $.ajax({
                    type: "delete",
                    url: url,
                    dataType: "json",
                    success: function (obj) {
                        if (obj.state == 0) {
                            that.parent().parent().remove();
                            layer.msg(obj.msg, {time: 2000, icon: 6});
                            del_type();
                        } else {
                            layer.msg(obj.msg, {time: 2000, icon: 5});
                        }
                    }, error: function () {
                        alert("发生错误：");
                    }
                });
            });
        });
    </script>
@endsection




